<template>
  <div class="container">
    <div class="shotbox">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <!-- <el-breadcrumb-item><a href="/">新闻中心</a></el-breadcrumb-item> -->
        <el-breadcrumb-item><a href="/media">照片视频</a></el-breadcrumb-item>
        <el-breadcrumb-item>相册</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- {{ this.$route.params.id }}
      <h1 style="text-align: center;font-size: 30px;margin: 30px 0;">{{ title }}</h1>
      <div class="taxt" v-html="context"></div> -->
      <div class="product-intro">
        <div class="preview-wrap">
          <el-carousel :autoplay="false" trigger="click">
            <el-carousel-item v-for="item in specImages" :key="item.id">
              <img :src="url + item.filePath" :alt="item.discription" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getAlbumDetail} from '@/api/official'
import http from '@/utils/baseUrl'
export default {
  components:{
  },
  data () {
    return {
      url: http,
      new:{},
      context:'',
      title:'',
      specImages: [
          //350x350大小的图片
      ],
      smallSpecImages:[
          //50x50大小的图片
      ]
    }
  },
  methods:{
    getNew() {
      let params = this.$route.params.id
      getAlbumDetail(params).then(res => {
        this.specImages = res.data
        this.smallSpecImages = res.data
        this.carLis = res.data
        // this.context = this.new.context
        // this.title = this.new.title
      })
    },
    //   将轮播图指示器渲染成图片
    indicatorToimage() {
      var a = document.querySelectorAll('.el-carousel__button');
      // console.log(a,'111');
      for (let i in this.specImages){
          //添加一个img
          let img = document.createElement('img');
          img.src=this.url + this.smallSpecImages[i].filePath;
          img.style = 'width:100%;height:100%'
          // console.log(this.smallSpecImages[i],'img')
          //加到button里面
          a[i].appendChild(img);
      }
    }
  },
  mounted() {
    this.getNew()
    // this.$nextTick(()=>this.indicatorToimage());
    this.$nextTick(() => {
      setTimeout(() => {
        this.indicatorToimage()
      },100);
    });
  }
}
</script>
<style lang="scss" scoped>
.product-intro {
  margin-top: 50px;
}
/* 轮播图样式 */
.preview-wrap .el-carousel {
  width: 800px;
  height: 800px;
  margin: auto;
}
.preview-wrap .el-carousel .el-carousel__item {
  height: 650px;
}
.preview-wrap .el-carousel .el-carousel__item img {
  height: 800px;
}
.preview-wrap .el-carousel .el-carousel__container {
  height: 800px !important;
}
.preview-wrap /deep/.el-carousel__button{
    width: 100px;
    height: 100px;
}
</style>
